#slides * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#slides ul, #slides li {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

#slides ul {height: 250px}

#slides li {
  width: 49.9%;
  height: 100%;
  position: absolute;
  display: none;
}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4) {display: block}

#slides li:nth-child(1) {
  left: 0;
  top: 0;
}

#slides li:nth-child(2) {
  left: 50.1%;
  width: 24.8%;
  height: 49.8%;
}

#slides li:nth-child(3) {
  left: 75.2%;
  width: 24.8%;
  height: 49.8%;
}

#slides li:nth-child(4) {
  left: 50.1%;
  top: 50.2%;
  height: 49.9%;
}

#slides a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slides img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 3px;
  background-color: #777;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

#slides .overlayx {
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
  background-position:50% 50%;
  background-repeat:repeat-x;
  border:3px solid #777;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}

#slides h4 {
  position: absolute;
  bottom: 30px;
  margin: 0;
  font-size: 18px;
  font-family: Georgia, Times, "Times New Roman";
  left: 0;
  padding: 0 10px;
  color: white;
  z-index: 3;
  line-height: 20px;
  font-weight: normal;
}

#slides li:nth-child(2) h4, #slides li:nth-child(3) h4 {
  font-size: 13px;
  line-height: 15px;
}

#slides .label_text {
  font-size: 9px;
  color: white;
  bottom: 10px;
  z-index: 3;
  left: 10px;
  font-family: Verdana, Geneva, sans-serif;
  position: absolute;
}

#slides li:nth-child(2) .autname, #slides li:nth-child(3) .autname {display: none}

#slides .overlayx, #slides li {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#slides li:hover .overlayx {
  -ms-filter: "progid: DXImageTransform.Microsoft. Alpha(Opacity=10)";
  filter: alpha(opacity=10);
  -khtml-opacity: 0.1;
  -moz-opacity: 0.1;
  opacity: 0.1;
}

#buttons {margin: 5px 0 0;text-align:center;}

#buttons a {
  display: inline-block;
  text-indent: -9999px;
  width: 15px;
  height: 25px;
  position: relative;
}

#buttons a::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 8px 7px;
  border-style: solid;
  border-color: transparent #535353 transparent transparent;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  margin-left: -10px;
  left: 50%;
}

#buttons a#nextx::before {
  border-color: transparent transparent transparent #535353;
  margin-left: -3px;
}

@media only screen and (max-width: 600px) {
  #slides ul {height: 600px}
  #slides li:nth-child(1) {
    width: 100%;
    height: 49.8%;
  }
  #slides li:nth-child(2) {
    top: 50.2%;
    height: 24.8%;
    left: 0;
    width: 49.8%;
  }
  #slides li:nth-child(3) {
    left: 50.2%;
    top: 50.2%;
    width: 49.8%;
    height: 24.8%;
  }
  #slides li:nth-child(4) {
    left: 0;
    top: 75.3%;
    height: 24.8%;
    width: 100%;
  }
}
